<template>
	<view class="cu-card margin padding bg-white radius" @click="orderDetail">
		<view class="text-black margin-bottom-sm padding-bottom-sm flex align-center solid-bottom">
			订单编号：<view class="text-sm">{{order.code}}</view>
		</view>
		<view class="flex text-black text-xl align-center justify-between margin-bottom-sm">
			<view>
				<view class="text-bold margin-bottom-sm">{{order.courseName}}</view>
				<view class="text-gray">x1</view>
			</view>
			<view class="text-price">{{order.totalPrice}}</view>
		</view>
		
		<view v-show="order.state===0" class="flex justify-between align-center">
			<view>支付时间：{{parseTime(order.payTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</view>
			<view class="cu-tag line-olive">支付成功</view>
		</view>
		
		<view v-show="order.state===2" class="flex justify-between align-center">
			<view>退款时间：{{parseTime(order.payTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</view>
			<view class="cu-tag line-blue">已退款</view>
		</view>
		
		<view v-show="order.state===3" class="flex justify-between align-center">
			<view>创建时间：{{parseTime(order.createTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</view>
			<view class="cu-tag line-gray">已取消</view>
		</view>
		
		<view v-show="order.state===1">创建时间：{{parseTime(order.createTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</view>
		<view v-show="order.state===1" class="flex justify-end align-center margin-top-sm">
			<button class="cu-btn bg-red" @click.stop="handlePayOrder">立即支付</button>
		</view>
	</view>
</template>

<script>
	import { parseTime } from '@/utils/parse.js'
	
	export default {
		name:"order-item",
		props:{
			order: {
				required: true,
				type: Object
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			parseTime,
			// 立即支付处理
			handlePayOrder() {
				this.$store.commit('course/set_courseId', this.order.courseId)
				uni.navigateTo({
					url: '/pages/order/create-order/create-order'
				})
				// console.log('支付');
			},
			// 跳转订单详情
			orderDetail() {
				this.$store.commit("order/set_code", this.order.code)
				uni.navigateTo({
					url: "/pages/order/order-detail/order-detail"
				})
			}
		}
	}
</script>

<style>

</style>
